<template>
  <div style="margin-bottom: 50px">
<!--    -->
    <h2>推荐</h2>
    <ul class="musicList">
      <router-link tag="li" :to="{path:'/detail',query:{id:item.id}}"   v-for="item in musicList" :key="item.id">
        <img :src="item.picUrl" alt="">
      </router-link>
    </ul>
    <h2>最新</h2>
    <ul>
      <router-link  tag="li" v-for="(item) in newMusicList" :key="item.id"  :to="{path:'/detail1',query:{id:item.id}}">
        {{item.name}}
      </router-link>
    </ul>
    <h2>排行榜</h2>
    <ul>
      <router-link tag="li" :to="{path:'/detail',query:{id:item.id}}"   v-for="item in rankingList" :key="item.id">
        <div style="font-size: 30px">{{item.name}}</div>
        <div v-for="item in item.tracks" :key="item.first">{{item.first}}</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import {newsong, personalized, shop, topList} from "@/api/http";

export default {
  name: "IndexView",
  data() {
    return {
      musicList:[],
      newMusicList:[],
      rankingList:[]
    };
  },
  methods:{
    // setIndex(val){
    //   console.log(111)
    //   this.$store.commit('changeIndex',val)
    // },
  },
  created() {
    shop().then(res=>{
      console.log(res)
    })
    personalized().then(res=>{
      console.log(res)
      this.musicList = res.result
    })

    newsong().then(res=>{
      this.$store.commit('changeSONG_lIST',res.result)
      this.newMusicList = res.result
    })
    topList().then(res=>{
      // console.log(res.list.splice(0,4))
      this.rankingList = res.list.splice(0,4)
    })
  }
}
</script>

<style scoped lang="less">
.musicList{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li{
    width: 32%;
    img{
      width: 100%;
    }
  }
}


</style>
